<template>
  <div id="ReceivablesIndex">
    <group>
      <grid :show-lr-borders="false">
        <grid-item label="换电池" @click.native="tab=1" :class="{active:tab==1}">
          <img v-if="tab!=1" slot="icon" src="../../assets/images/dianchi.png">
          <img v-if="tab==1" slot="icon" src="../../assets/images/dianchi_active.png">
        </grid-item>
        <grid-item label="换配件" @click.native="tab=2" :class="{active:tab==2}">
          <img v-if="tab!=2" slot="icon" src="../../assets/images/peijian.png">
          <img v-if="tab==2" slot="icon" src="../../assets/images/peijian_active.png">
        </grid-item>
        <grid-item label="维修费" @click.native="tab=3" :class="{active:tab==3}">
          <img v-if="tab!=3" slot="icon" src="../../assets/images/weixiufei.png">
          <img v-if="tab==3" slot="icon" src="../../assets/images/weixiufei_active.png">
        </grid-item>
        <grid-item label="其它" @click.native="tab=4" :class="{active:tab==4}">
          <img v-if="tab!=4" slot="icon" src="../../assets/images/qita.png">
          <img v-if="tab==4" slot="icon" src="../../assets/images/qita_active.png">
        </grid-item>
      </grid>
    </group>
    <group label-width="6.5em">
      <x-input title="金额(元) : " placeholder="请输入金额" type="number"  v-model="text" @on-change="checkFun"></x-input>
    </group>
    <x-button type="primary" style="margin: 50px auto 0;width: 92%" action-type="button" @click.native="submitFun">收 款</x-button>
    <div v-transfer-dom>
      <alert v-model="showAlertMsg"> {{ contentAlert }}</alert>
    </div>
  </div>
</template>

<script>
  import {  Grid,Group, GridItem, GroupTitle,XInput,XButton,Alert,AlertModule,TransferDomDirective as TransferDom,cookie } from 'vux'
  import { sorts,sign } from '../../aes/make';
  import { Decrypt} from '../../aes/aes';
  import { payQrCode } from '../../mock/api';
  export default {
    name: "complaint-index",
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Alert,
      Grid,
      GridItem,
      GroupTitle,
      XInput,
      Group
    },
    data(){
      return{
        tab:1,
        text:'',
        showAlertMsg:false,
        contentAlert:''
      }
    },
    computed:{

    },
    created () {
      let vue = this
      vue.updateTitle('收 款');
      vue.updateGreenRightNum(0);
      // vue.updateUrlBack('/index.php?s=/shop/user/personal_center');
      // vue.updatePreventGoBack(true);
    },
    mounted(){

    },
    methods: {
      checkFun(value){
        if(/^\d+(\.\d{1,2})?$/.test(value)) {
        }else{
          this.text = value.substring(0,value.length-2);
        }
      },
      submitFun(){
        let vue=this;
        var json={
          money:this.text,
          fl:this.tab
        };
        var gid=cookie.get('gid');
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var sort=sorts();
        json['gid']=gid;
        json['uid']=uid;
        json['access_token']=access_token;
        json['sorts']=sort;
        var si=sign(json);
        json['sign']=si;
        payQrCode(json).then((res) => {
          if(res.code==2000){
            // var data=Decrypt(res.data);
            // data=JSON.parse(data);
            var data=res.data;
            console.log(data);
            vue.$router.push({name: 'ReceivablesCode',query:{"url":data.url,"order":data.order_num,"money":data.money}});
          }else if(res.code > 3000 &&  res.code < 4000){
            this.showAlertMsg=true;
            this.contentAlert=res.message;
            setTimeout(function(){
              vue.$router.replace({name: 'login'});
            },1200)
          }else{
            this.showAlertMsg=true;
            this.contentAlert=res.message;
          }
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  @green:#51ac33;
  @blue:#1babe3;
  @huang:#ff6000;
  @red:#ff0000;
  #ReceivablesIndex{
    .weui-cell{
      padding: 15px;
    }
  }
</style>
